<template>
  <van-popup v-model:show="show" round :style="{ width: '5.9rem' }">
    <div class="popup-content">
      <template v-if="type === 2">
        <img
          class="popup-border"
          src="@/assets/img/receive-border.png"
          alt=""
        />
        <div class="prize-info">
          <div class="info-title">
            Reward information
            <img
              src="@/assets/img/receive-close.png"
              alt=""
              class="close-icon"
              @click="closeModal"
            />
          </div>
          <div class="info-content">
            <img :src="detail.icon" alt="" />
          </div>
          <div class="info-btn" @click="goPack">{{ btnText }}</div>
        </div>
      </template>
      <template v-else>
        <img
          class="popup-border"
          src="@/assets/img/receive-border-buy.png"
          alt=""
        />
        <div class="prize-info">
          <div class="info-title">
            Reward information
            <img
              src="@/assets/img/receive-close.png"
              alt=""
              class="close-icon"
              @click="closeModal"
            />
          </div>
          <div class="info-content-buy">
            <img :src="detail.icon" alt="" />
            <div class="text">
              Limited time promotion,<br />
              cheaper than regular purchase
            </div>
          </div>
          <div class="info-btn" @click="goPack">{{ btnText }}</div>
        </div>
      </template>
    </div>
  </van-popup>
</template>

<script>
export default {
  name: 'GiftDetailModal',
  data() {
    return {
      show: false,
      detail: {}
    }
  },
  computed: {
    type() {
      const { type = 1 } = this.detail
      return type
    },
    btnText() {
      return [2].includes(this.type) ? 'Receive' : 'Buy'
    }
  },
  methods: {
    showModal(data) {
      console.log(data)
      this.detail = data
      this.show = true
      return new Promise((resolve, reject) => {
        console.log(reject)
        this.callback = resolve
      })
    },
    callback() {},
    goPack() {
      console.log('goPack', this.detail)
      const { type, backpackId, productId } = this.detail
      if (type === 2) {
        this.getUnpacking()
      } else {
        this.$jsBridge.prizeExchange({
          productId,
          bagId: backpackId,
          type,
          h5Payment: 1
        })
      }
    },
    async getUnpacking() {
      const { backpackId } = this.detail
      const { code } = await this.$request({
        url: '/api/v2/activity/turntable/unpacking',
        params: {
          backPackId: backpackId,
          purchaseToken: ''
        }
      })
      console.log('code===', code)
      if (code === 200) {
        this.$Toast('Receive Success')
        this.callback()
        this.closeModal()
      }
    },
    closeModal() {
      this.show = false
    }
  }
}
</script>
<style lang="less" scoped>
.popup-content {
  position: relative;
  .popup-border {
    width: 100%;
    height: 100%;
  }
  .prize-info {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    .info-title {
      font-size: 0.32rem;
      color: #ffffff;
      height: 0.76rem;
      line-height: 0.76rem;
      text-align: center;
      position: relative;
      .close-icon {
        position: absolute;
        right: 0.2rem;
        top: 0.22rem;
        width: 0.4rem;
      }
    }
    .info-content {
      margin: 0.36rem auto;
      width: 89%;
      height: 2.4rem;
      border-radius: 0.3rem;
      text-align: center;
      img {
        height: 2.4rem;
      }
    }
    .info-content-buy {
      margin: 0.36rem auto;
      width: 89%;
      border-radius: 0.3rem;
      height: 4.1rem;
      text-align: center;
      img {
        height: 3.2rem;
      }
      .text {
        font-size: 0.28rem;
        color: #bc2600;
        margin: -0.2rem 0 0 0;
      }
    }
    .info-btn {
      width: 3.1rem;
      height: 0.8rem;
      line-height: 0.8rem;
      background: url('@/assets/img/receive-btn.png') no-repeat 0 0/100%;
      margin: 0 auto;
      text-align: center;
      color: #fff;
      font-size: 0.32rem;
    }
  }
}
</style>
